// @import './utils.scss';
@import './util/typography.scss';
@import './util/variables.scss';

.list-items .list-item {
  @include font-s2;

  // Layout of list-item children
  display: flex;
  flex-wrap: wrap;
  height: 3rem;
  width: 100%;

  .checkbox {
    flex: 0, 0, 44px;
    cursor: pointer;
  }
  input[type="text"] { flex: 1; }
  .delete-item { flex: 0, 0, 3rem; }


  // Style of list-item children
  input[type="text"] {
    background: transparent;
    cursor: pointer;

    &:focus { cursor: text; }
  }

  .delete-item {
    color: $color-medium-rare;
    line-height: 3rem;
    text-align: center;

    &:hover { color: $color-primary; }
    &:active { color: $color-well; }
    .icon-trash { font-size: 1.1em; }
  }


  // Border between list items
  & + .list-item { border-top: 1px solid #f0f9fb; }

  // Checked
  &.checked {
    input[type="text"] {
      color: $color-medium-rare;
      text-decoration: line-through;
    }

    .delete-item { display: inline-block; }
  }

  // Editing
  .delete-item { display: none; }
  &.editing .delete-item { display: inline-block; padding: 0 10px;}
}
